<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火灾调查知识库平台 - 火调知识图谱</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- Element Plus -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus"></script>
    <!-- ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
    <!-- Vis.js -->
    <script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
    <style>
        .logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: #fff;
        }
        .main-content {
            height: calc(100vh - 60px);
            overflow-y: auto;
        }
        .nav-item {
            position: relative;
        }
        .nav-item:not(:last-child):after {
            content: "";
            position: absolute;
            right: 0;
            top: 25%;
            height: 50%;
            width: 1px;
            background-color: rgba(255, 255, 255, 0.3);
        }
        #knowledge-graph {
            width: 100%;
            height: 600px;
            border: 1px solid #ddd;
            background-color: #f9f9f9;
        }
        .graph-controls {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 10;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 4px;
            padding: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .node-details {
            position: absolute;
            bottom: 10px;
            left: 10px;
            z-index: 10;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 4px;
            padding: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            max-width: 300px;
            display: none;
        }
    </style>
</head>
<body class="bg-gray-100">
    <!-- 顶部导航栏 -->
    <nav class="bg-gradient-to-r from-red-600 to-red-800 shadow-lg">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <div class="logo flex items-center">
                        <i class="fas fa-fire-extinguisher mr-2"></i>
                        <span>火灾调查知识库平台</span>
                    </div>
                </div>
                
                <div class="flex items-center space-x-1">
                    <a href="index.html" class="nav-item text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-search mr-1"></i> 检索
                    </a>
                    <a href="knowledge-graph.html" class="nav-item text-white bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-project-diagram mr-1"></i> 火调知识图谱
                    </a>
                    <a href="ai-search.html" class="nav-item text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-robot mr-1"></i> AI检索功能
                    </a>
                    <a href="report-generator.html" class="nav-item text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-file-alt mr-1"></i> 火调报告生成
                    </a>
                    <a href="model-cockpit.html" class="nav-item text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-tachometer-alt mr-1"></i> 火调大模型驾驶舱
                    </a>
                    <a href="user-center.html" class="nav-item text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-user mr-1"></i> 个人中心
                    </a>
                    <a href="login.html" class="nav-item text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-sign-in-alt mr-1"></i> 登录
                    </a>
                    <a href="register.html" class="nav-item text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-user-plus mr-1"></i> 注册
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主内容区 - 知识图谱页面 -->
    <div class="main-content container mx-auto px-4 py-6">
        <div class="bg-white rounded-lg shadow p-6">
            <div class="mb-6 flex justify-between items-center">
                <h2 class="text-2xl font-bold text-gray-800">火灾调查知识图谱</h2>
                <div class="flex space-x-2">
                    <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center">
                        <i class="fas fa-save mr-1"></i> 保存图谱
                    </button>
                    <button class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 flex items-center">
                        <i class="fas fa-share-alt mr-1"></i> 导出图谱
                    </button>
                </div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
                <!-- 左侧工具栏 -->
                <div class="lg:col-span-1">
                    <div class="bg-gray-50 rounded-lg p-4 mb-4">
                        <h3 class="font-semibold text-gray-700 mb-3">图谱选择</h3>
                        <select class="w-full px-3 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-red-500 mb-3">
                            <option>电气火灾知识图谱</option>
                            <option>燃气泄漏火灾知识图谱</option>
                            <option>化学品火灾知识图谱</option>
                            <option>高层建筑火灾知识图谱</option>
                            <option>消防法规体系知识图谱</option>
                        </select>
                        <button class="w-full px-3 py-2 bg-red-600 text-white rounded hover:bg-red-700">
                            加载图谱
                        </button>
                    </div>

                    <div class="bg-gray-50 rounded-lg p-4 mb-4">
                        <h3 class="font-semibold text-gray-700 mb-3">图谱操作</h3>
                        <div class="space-y-2">
                            <button class="w-full px-3 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 flex items-center justify-center">
                                <i class="fas fa-plus-circle mr-1"></i> 添加实体
                            </button>
                            <button class="w-full px-3 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 flex items-center justify-center">
                                <i class="fas fa-link mr-1"></i> 添加关系
                            </button>
                            <button class="w-full px-3 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 flex items-center justify-center">
                                <i class="fas fa-trash-alt mr-1"></i> 删除选中
                            </button>
                            <button class="w-full px-3 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 flex items-center justify-center">
                                <i class="fas fa-edit mr-1"></i> 编辑属性
                            </button>
                        </div>
                    </div>

                    <div class="bg-gray-50 rounded-lg p-4 mb-4">
                        <h3 class="font-semibold text-gray-700 mb-3">分析工具</h3>
                        <div class="space-y-2">
                            <button class="w-full px-3 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 flex items-center justify-center">
                                <i class="fas fa-route mr-1"></i> 路径分析
                            </button>
                            <button class="w-full px-3 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 flex items-center justify-center">
                                <i class="fas fa-sitemap mr-1"></i> 拓扑分析
                            </button>
                            <button class="w-full px-3 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 flex items-center justify-center">
                                <i class="fas fa-expand-arrows-alt mr-1"></i> 关系扩展
                            </button>
                            <button class="w-full px-3 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 flex items-center justify-center">
                                <i class="fas fa-project-diagram mr-1"></i> 子图提取
                            </button>
                        </div>
                    </div>

                    <div class="bg-gray-50 rounded-lg p-4">
                        <h3 class="font-semibold text-gray-700 mb-3">智能推理</h3>
                        <div class="space-y-2">
                            <button class="w-full px-3 py-2 bg-yellow-100 text-yellow-700 rounded hover:bg-yellow-200 flex items-center justify-center">
                                <i class="fas fa-exclamation-triangle mr-1"></i> 风险预测
                            </button>
                            <button class="w-full px-3 py-2 bg-yellow-100 text-yellow-700 rounded hover:bg-yellow-200 flex items-center justify-center">
                                <i class="fas fa-brain mr-1"></i> 跨域联想
                            </button>
                            <button class="w-full px-3 py-2 bg-yellow-100 text-yellow-700 rounded hover:bg-yellow-200 flex items-center justify-center">
                                <i class="fas fa-lightbulb mr-1"></i> 案例推荐
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 右侧知识图谱展示区 -->
                <div class="lg:col-span-3 relative">
                    <div id="knowledge-graph"></div>
                    
                    <!-- 图谱控制区 -->
                    <div class="graph-controls">
                        <div class="flex space-x-2 mb-2">
                            <button class="p-1 bg-gray-200 rounded hover:bg-gray-300" title="放大">
                                <i class="fas fa-search-plus"></i>
                            </button>
                            <button class="p-1 bg-gray-200 rounded hover:bg-gray-300" title="缩小">
                                <i class="fas fa-search-minus"></i>
                            </button>
                            <button class="p-1 bg-gray-200 rounded hover:bg-gray-300" title="适应画布">
                                <i class="fas fa-expand"></i>
                            </button>
                        </div>
                        <div class="flex space-x-2">
                            <button class="p-1 bg-gray-200 rounded hover:bg-gray-300" title="全屏">
                                <i class="fas fa-expand-arrows-alt"></i>
                            </button>
                            <button class="p-1 bg-gray-200 rounded hover:bg-gray-300" title="截图">
                                <i class="fas fa-camera"></i>
                            </button>
                            <button class="p-1 bg-gray-200 rounded hover:bg-gray-300" title="刷新">
                                <i class="fas fa-sync-alt"></i>
                            </button>
                        </div>
                    </div>

                    <!-- 节点详情区 -->
                    <div class="node-details" id="node-details">
                        <h4 class="font-bold text-gray-800 mb-2">电线短路</h4>
                        <div class="mb-2">
                            <span class="inline-block px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs mb-1">电气火灾</span>
                            <span class="inline-block px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs mb-1">故障类型</span>
                        </div>
                        <p class="text-sm text-gray-600 mb-3">电线短路是指电路中正常电流传导路径被旁路，导致大量电流通过该旁路并产生高热，是电气火灾的常见起因。</p>
                        <div class="border-t border-gray-200 pt-2 mt-2">
                            <h5 class="font-semibold text-sm text-gray-700 mb-1">关联关系</h5>
                            <ul class="text-xs text-gray-600">
                                <li class="mb-1"><span class="font-semibold">导致</span>: 电气火灾</li>
                                <li class="mb-1"><span class="font-semibold">相关因素</span>: 绝缘层老化, 过载, 机械损伤</li>
                                <li class="mb-1"><span class="font-semibold">预防措施</span>: 定期检查, 使用漏电保护器</li>
                            </ul>
                        </div>
                        <div class="text-right mt-2">
                            <button class="text-xs text-blue-600 hover:text-blue-800">查看完整信息</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 模板管理区 -->
            <div class="mt-6">
                <h3 class="text-xl font-semibold text-gray-800 mb-4">图谱模板管理</h3>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    模板名称
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    概念数量
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    关系数量
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    创建时间
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    最后更新
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    操作
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">电气火灾基础模板</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-500">42</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-500">78</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-500">2023-06-15</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-500">2023-09-22</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                    <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">编辑</a>
                                    <a href="#" class="text-green-600 hover:text-green-900 mr-3">应用</a>
                                    <a href="#" class="text-red-600 hover:text-red-900">删除</a>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">消防法规体系模板</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-500">63</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-500">92</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-500">2023-04-08</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-500">2023-10-05</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                    <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">编辑</a>
                                    <a href="#" class="text-green-600 hover:text-green-900 mr-3">应用</a>
                                    <a href="#" class="text-red-600 hover:text-red-900">删除</a>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">商业综合体火灾模板</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-500">56</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-500">84</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-500">2023-05-20</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-500">2023-08-12</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                    <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">编辑</a>
                                    <a href="#" class="text-green-600 hover:text-green-900 mr-3">应用</a>
                                    <a href="#" class="text-red-600 hover:text-red-900">删除</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 知识图谱相关脚本
        document.addEventListener('DOMContentLoaded', function() {
            // 创建容器
            var container = document.getElementById('knowledge-graph');
            
            // 创建示例数据
            var nodes = new vis.DataSet([
                {id: 1, label: '电线短路', group: 'cause', title: '电气火灾常见起因'},
                {id: 2, label: '电气火灾', group: 'fire', title: '由电气设备故障引起的火灾'},
                {id: 3, label: '绝缘层老化', group: 'factor', title: '电线绝缘层随时间劣化'},
                {id: 4, label: '过载', group: 'factor', title: '电流超过线路设计负荷'},
                {id: 5, label: '机械损伤', group: 'factor', title: '电线物理损坏'},
                {id: 6, label: '定期检查', group: 'prevention', title: '定期检查电气线路'},
                {id: 7, label: '漏电保护器', group: 'equipment', title: '检测漏电并自动断电的设备'},
                {id: 8, label: '高温', group: 'phenomenon', title: '异常高温'},
                {id: 9, label: '电弧', group: 'phenomenon', title: '导体间的放电现象'},
                {id: 10, label: '电气标准', group: 'regulation', title: '电气安全相关标准'},
            ]);

            var edges = new vis.DataSet([
                {from: 1, to: 2, label: '导致', arrows: 'to'},
                {from: 3, to: 1, label: '促成', arrows: 'to'},
                {from: 4, to: 1, label: '促成', arrows: 'to'},
                {from: 5, to: 1, label: '促成', arrows: 'to'},
                {from: 6, to: 1, label: '预防', arrows: 'to', dashes: true},
                {from: 7, to: 1, label: '防止', arrows: 'to', dashes: true},
                {from: 1, to: 8, label: '产生', arrows: 'to'},
                {from: 1, to: 9, label: '产生', arrows: 'to'},
                {from: 10, to: 6, label: '规定', arrows: 'to'},
                {from: 10, to: 7, label: '规定', arrows: 'to'},
            ]);

            // 配置选项
            var options = {
                nodes: {
                    shape: 'dot',
                    size: 16,
                    font: {
                        size: 14,
                        face: 'Arial'
                    },
                    borderWidth: 2,
                    shadow: true
                },
                edges: {
                    width: 2,
                    shadow: true,
                    font: {
                        size: 12,
                        align: 'middle'
                    },
                    color: {
                        color: '#2B7CE9',
                        highlight: '#FFA500',
                        hover: '#848484'
                    }
                },
                groups: {
                    cause: {
                        color: {background: '#FF6384', border: '#E63E62'},
                        shape: 'dot'
                    },
                    fire: {
                        color: {background: '#FF9F40', border: '#E27F20'},
                        shape: 'dot'
                    },
                    factor: {
                        color: {background: '#36A2EB', border: '#1682CB'},
                        shape: 'dot'
                    },
                    prevention: {
                        color: {background: '#4BC0C0', border: '#2BA0A0'},
                        shape: 'dot'
                    },
                    equipment: {
                        color: {background: '#9966FF', border: '#7946DF'},
                        shape: 'dot'
                    },
                    phenomenon: {
                        color: {background: '#FFCD56', border: '#DFAD36'},
                        shape: 'dot'
                    },
                    regulation: {
                        color: {background: '#C9CBCF', border: '#A9ABAF'},
                        shape: 'dot'
                    }
                },
                physics: {
                    stabilization: false,
                    barnesHut: {
                        gravitationalConstant: -2000,
                        centralGravity: 0.3,
                        springLength: 140,
                        springConstant: 0.04,
                        damping: 0.09
                    }
                },
                interaction: {
                    tooltipDelay: 200,
                    hover: true,
                    navigationButtons: true,
                    keyboard: true
                }
            };

            // 创建网络
            var network = new vis.Network(container, {nodes: nodes, edges: edges}, options);

            // 点击节点显示详情
            network.on("click", function (params) {
                if (params.nodes.length > 0) {
                    var nodeId = params.nodes[0];
                    var nodeDetails = document.getElementById('node-details');
                    nodeDetails.style.display = 'block';
                    
                    // 在实际应用中，这里应该是通过API获取节点详细信息
                    console.log("点击了节点ID: " + nodeId);
                } else {
                    document.getElementById('node-details').style.display = 'none';
                }
            });

            // 双击节点展开关系
            network.on("doubleClick", function (params) {
                if (params.nodes.length > 0) {
                    var nodeId = params.nodes[0];
                    console.log("双击了节点ID: " + nodeId + "，展开关系");
                    // 实际应用中，这里应该通过API请求该节点的关联关系，并动态添加到图谱中
                }
            });
        });
    </script>
</body>
</html> 